<template>
<div class="content">
  <header>
     <span :class="index==clickIndex?'chosen':'notChosen'" v-for="(it,index) in headerList" :key="index" @click="handleClick(index)">{{it}}</span>
  </header>
  <list-arr :clickIndex="clickIndex"/>
</div>
</template>

<script lang="ts">
import { defineComponent,ref, Ref } from 'vue'
import listArr from "../components/listArr.vue"
export default defineComponent({
  components: {listArr},
  setup(){
    let clickIndex = ref(0)
    const headerList=ref(['便签','待办'])
    const handleClick=(index:number)=>{
      clickIndex.value=index
    }
    return{
    headerList,
    handleClick,
    clickIndex
  }
  }
})
</script>
<style lang="scss" scoped>
   header{
    text-align: center;
    padding-bottom: 20px;
     span{
      padding: 10px 30px;
      margin: 20px;
      border-radius: 5px;
     }
     .chosen {
      background: rgb(134, 207, 211);
      color: white;
     }
     .notChosen {
      color: rgb(105, 105, 105);
      border: 1px solid rgb(105, 105, 105);
     }
   }
  
</style>
